<template>
  <div class="execution">
    <basic-container class="content">
      <h1 class="title">采购商货款详情</h1>

      <div class="basic">
        <h2 class="io-goods-detail">
          基础信息
        </h2>
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple">订单号:1111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">客户名称:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div>创建日期:111</el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light"></div>单据状态:111</el-col>
            <el-col :span="6"><div class="grid-content bg-purple">收款人:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">收款方式:1111</div></el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light"></div>单据金额:111</el-col>
            <el-col :span="6"><div class="grid-content bg-purple"><el-link type="primary">查看收款凭证</el-link></div></el-col>
          </el-row>
        </template>
      </div>

      <div class="basic">
        <h2 class="io-goods-detail">
          订单商品清单
        </h2>
        <template>
          <el-table
            :data="tableData"
            style="width: 100%"
            >
            <el-table-column
              prop="goodsName"
              label="商品名称"
              width="300">
            </el-table-column>
            <el-table-column
              prop="units"
              label="单位"
              width="300">
            </el-table-column>
            <el-table-column
              prop="shipmentNum"
              label="发货数量"
              width="300"
              >
            </el-table-column>
            <el-table-column
              prop="shipmentPrice"
              label="发货单价"
              width="300"
              >
            </el-table-column>
            <el-table-column
              prop="shipmentMoney"
              label="发货金额"
               width="300"
              >
            </el-table-column>
          </el-table>
        </template>
      </div>

      <div class="summation">
        <p>合计账单金额：&yen; <span>800.00</span></p>
      </div>

    </basic-container>
  </div>
</template>

<script>
    export default {
      name: "index",
      data() {
        return {
          tableData: [{
            goodsName: '王小虎',
            units: '123',
            shipmentNum:'333',
            shipmentPrice:'111',
            shipmentMoney:'22'
          }]
        }
      }
    }
</script>

<style lang="scss" scoped>
  .content{
    .title{
      height: 60px;
      text-align: center;
    }
  }


  .io-goods-detail {
    margin-left: 10px;
  }

  .settle-accounts {
    text-align: right;
  }

  .basic-information {
    margin-top: 20px;
    font-weight: inherit;
  }

  .return-btn {
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
  }

  .tabContent {
    padding-left: 10px;

    .el-tabs__item {
      font-size: 20px;
    }
  }

  .finance, .basic, .principal {
    margin-bottom: 20px;

    h2 {
      background-color: #eee;
      margin-left: 0;
      padding-left: 10px;
    }
  }
  .summation{
      p{
        text-align: right;
        font-size: 16px;
        padding-right: 20px;
      }
  }

</style>
